<div class="put-direct-warehousing">
  <!-- 基本信息 START -->
  <h3>基本信息</h3>
  <!-- 入库单号 -->
  <nz-form-item *ngIf="routeParams.id != '0'">
    <nz-form-label
      nz-col>
      入库单号
    </nz-form-label>
    <nz-form-control
      nz-col
      nzFlex="400px">
      <input
        nz-input
        maxlength="20"
        placeholder="入库单号"
        disabled
        [(ngModel)]="formParams.warehousingNumber">
    </nz-form-control>
  </nz-form-item >

  <!-- 入库类型 -->
  <nz-form-item>
    <nz-form-label
      nz-col
      nzRequired>
      入库类型
    </nz-form-label>
    <nz-form-control
      nz-col
      nzFlex="520px">
      <nz-radio-group [(ngModel)]="formParams.warehousing.type">
        <label
          *ngFor="let item of storageTypeList"
          nz-radio
          [nzValue]="item.content"
          [nzDisabled]="['1', '2'].includes(item.content)">
          {{ item.name }}
        </label>
      </nz-radio-group>
    </nz-form-control>
  </nz-form-item >

  <!-- 入库仓库 -->
  <nz-form-item>
    <nz-form-label
        nz-col
        nzRequired>
        入库仓库
    </nz-form-label>
    <nz-form-control
        nz-col
        nzFlex="400px">
        <nz-select
            nzShowSearch
            nzAllowClear
            nzPlaceHolder="请选择入库仓库"
            [(ngModel)]="formParams.warehousing.whPutId">
            <nz-option
                *ngFor="let item of warehouseLists"
                [nzLabel]="item.name"
                [nzValue]="item.id">
            </nz-option>
        </nz-select>
    </nz-form-control>
  </nz-form-item>

  <!-- 甲方 -->
  <nz-form-item>
    <nz-form-label
        nz-col
        nzRequired>
        甲方
    </nz-form-label>
    <nz-form-control
        nz-col
        nzFlex="400px">
        <nz-select
            nzShowSearch
            nzAllowClear
            nzPlaceHolder="请选择入甲方"
            [(ngModel)]="formParams.warehousing.firstParty">
            <nz-option
                *ngFor="let item of supplierList"
                [nzLabel]="item.name"
                [nzValue]="item.id">
            </nz-option>
        </nz-select>
    </nz-form-control>
  </nz-form-item>

  <!-- 乙方 -->
  <nz-form-item>
    <nz-form-label
        nz-col
        nzRequired>
        乙方
    </nz-form-label>
    <nz-form-control
        nz-col
        nzFlex="400px">
        <nz-select
            nzShowSearch
            nzAllowClear
            nzPlaceHolder="请选择乙方"
            [(ngModel)]="formParams.warehousing.partyB">
            <nz-option
                *ngFor="let item of supplierList"
                [nzLabel]="item.name"
                [nzValue]="item.id">
            </nz-option>
        </nz-select>
    </nz-form-control>
  </nz-form-item>

  <!-- 备注 -->
  <nz-form-item>
    <nz-form-label
      nz-col>
      备注
    </nz-form-label>
    <nz-form-control
      nz-col
      nzFlex="400px">
      <nz-textarea-count [nzMaxCharacterCount]="100">
        <textarea
          class="textarea-cont"
          nz-input
          maxlength="100"
          placeholder="仅内部可见"
          [(ngModel)]="formParams.warehousing.remark">
        </textarea>
      </nz-textarea-count>
    </nz-form-control>
  </nz-form-item >
  <!-- 基本信息 END -->

  <!-- 入库详情 START -->
  <h3 class="title-h">入库详情</h3>

  <!-- Table -->
  <div class="table-wrap">
    <nz-table
      #basicTable
      nzSize="small"
      nzBordered
      [nzFrontPagination]="false"
      [nzScroll]="{ x: '900px', y: '650px' }"
      [nzWidthConfig]="nzWidthConfig"
      [nzData]="selectedTables"
    >
      <thead>
        <tr>
          <th rowspan="2" nzAlign="center" nzLeft>序号</th>
          <th colspan="4">商品信息</th>
          <th colspan="2">本次入库信息</th>
          <th rowspan="2" nzAlign="center" nzRight>操作</th>
        </tr>
        <tr>
            <th nzAlign="center">商品编号</th>
            <th nzAlign="center">商品名称</th>
            <th nzAlign="center">商品69码</th>
            <th nzAlign="center">标准采购价(含税)</th>
            <th nzAlign="center">入库数量</th>
            <th nzAlign="center">品质</th>
        </tr>
      </thead>

      <tbody>
        <tr *ngFor="let data of selectedTables; let index = index;">
          <td nzAlign="center" nzLeft>{{ index + 1 }}</td>
          <!-- 商品编号 -->
          <td nzAlign="center">{{ data.whGoodsId }}</td>
          <!-- 商品名称 -->
          <td nzAlign="center" nzBreakWord>{{ data.name || '-' }}</td>
          <!-- 商品69码 -->
          <td nzAlign="center">{{ data.code || '-' }}</td>
          <!-- 标准采购价(含税) -->
          <td nzAlign="center">
            {{ (data.standardCostPrice || data.standardCostPrice == '0') ? '￥' + (data.standardCostPrice| number : '0.4-4' ): '-'}}
          </td>
          <!-- 入库数量 -->
          <td nzAlign="center">
            <nz-input-number
              [nzId]="'putSaveInputID' + index"
              [(ngModel)]="data.number"
              [nzMin]="1"
              nzPlaceHolder="入库数量"
              [nzMax]="data.maxStockNumber"
              (nzBlur)="setStorageTotal()"
              (keydown)="onKeydownEnter($event, index)">
            </nz-input-number>
          </td>
          <!-- 品质 -->
          <td nzAlign="center">
            <nz-select
              style="width: 70%; text-align: left;"
              [(ngModel)]="data.quality"
              nzPlaceHolder="请选择品质">
              <nz-option
                *ngFor="let item of qualityList"
                [nzValue]="item.value"
                [nzLabel]="item.text">
              </nz-option>
            </nz-select>
          </td>
          <!-- 操作 -->
          <td nzAlign="center" nzRight>
            <button
              nz-button
              nz-button-tdlink
              nzType="link"
              nzDanger
              nz-popconfirm
              nzPopconfirmTitle="确认删除吗?"
              [nzIcon]="iconTpl"
              (nzOnConfirm)="deleteItems(data, index)">
              删除
            </button>
            <ng-template #iconTpl>
              <i nz-icon nzType="question-circle-o" style="color: red;"></i>
            </ng-template>
          </td>
        </tr>
        <tr *ngIf="selectedTables && selectedTables.length > 0">
          <td nzAlign="center">合计</td>
          <td nzAlign="center" colSpan="4"></td>
          <td nzAlign="center">{{ formParams.storageTotal }}</td>
          <td nzAlign="center">
              <nz-select
                style="width: 70%; text-align: left;"
                nzAllowClear
                nzPlaceHolder="请选择"
                [(ngModel)]="selectedQuality"
                (ngModelChange)="selectQuality($event)">
                <nz-option
                  *ngFor="let item of qualityList"
                  [nzValue]="item.value"
                  [nzLabel]="item.text">
                </nz-option>
              </nz-select>
          </td>
          <td nzAlign="center" nzRight>-</td>
        </tr>
        <tr>
          <td colspan="8" class="table-foot">
            <a nz-button nzType="link" (click)="addTableItems()">
              <i nz-icon nzType="plus" nzTheme="outline"></i>添加
            </a>
          </td>
        </tr>
      </tbody>
    </nz-table>
  </div>
  <!-- 入库详情 END -->

  <!-- footer -->
  <div class="footer-wrap">
      <nz-divider></nz-divider>
      <div class="foot-btns">
          <app-bt-group
            btType="dashed"
            btText="保存"
            [isLoading]="subLoading"
            (btClick)="preserData()">
          </app-bt-group>

          <app-bt-group
            btType="default"
            btText="返回">
          </app-bt-group>
      </div>
  </div>
</div>

<!-- model START -->
<nz-modal
  [nzWidth]="1500"
  [(nzVisible)]="isVisible"
  nzTitle="选择采购商品"
  [nzFooter]="null"
  (nzOnCancel)="handleCancel()">

  <ng-container *nzModalContent>
    <div class="model-seach">
      <div class="seach-lf">
        <button
          nz-button
          nzType="primary"
          (click)="relationData()">
          申请已选商品 {{ setOfCheckedId.size }}
        </button>
      </div>

      <div class="seach-rt">
        <div class="seach-item">
          <label class="seach-item-label">商品：</label>
          <input
            class="seach-ipt"
            nz-input
            placeholder="69码/商品编号/名称"
            [(ngModel)]="modelSeachForms.whGood"
          />
        </div>
        <div class="seach-item">
          <label class="seach-item-label">排队数大于：</label>
          <input
            class="seach-ipt"
            nz-input
            placeholder="请输入"
            [(ngModel)]="modelSeachForms.lineupNumber"
          />
        </div>
        <div class="seach-item">
          <label class="seach-item-label">实际库存小于：</label>
          <input
            class="seach-ipt"
            nz-input
            placeholder="请输入"
            [(ngModel)]="modelSeachForms.stock"
          />
        </div>
        <div class="seach-item">
          <label class="seach-item-label">超卖数量大于：</label>
          <input
            class="seach-ipt"
            nz-input
            placeholder="请输入"
            [(ngModel)]="modelSeachForms.oversoldNumber"
          />
        </div>
        <button
          nz-button
          nzType="primary"
          (click)="seachData()">
          查询
        </button>
        <button nz-button nzType="default" (click)="resetData()">重置</button>
      </div>
    </div>

    <!-- tip -->
    <p class="tip-txt">※ 仅显示审核通过并且同步成功的仓库商品</p>

    <!-- table -->
    <nz-table
      #modelTable
      nzSize="small"
      nzShowSizeChanger
      nzShowQuickJumper
      nzOuterBordered
      [nzFrontPagination]="false"
      [nzLoadingDelay]="100"
      [nzLoading]="modelTableForms.tableLoading"
      [nzData]="modelTableData"
      [nzPageSizeOptions]="[5, 10, 20, 50, 100]"
      [nzTotal]="modelTableForms.total"
      [nzPageIndex]="modelTableForms.page"
      [nzPageSize]="modelTableForms.pageSize"
      [nzShowTotal]="modelTotalTemplate"
      (nzPageIndexChange)="onPageIndexChange($event)"
      (nzPageSizeChange)="onPageSizeChange($event)"
      (nzCurrentPageDataChange)="onCurrentPageDataChange($event)">
      <thead>
        <tr>
          <th
            [width]="50"
            nzAlign="center"
            [(nzChecked)]="checked"
            [nzIndeterminate]="indeterminate"
            (nzCheckedChange)="onAllChecked($event)">
          </th>
          <th nzAlign="center" nzWidth="100px">商品编号</th>
          <th nzAlign="center" nzWidth="250px">商品名称</th>
          <th nzAlign="center" nzWidth="120px">商品规格</th>
          <th nzAlign="center" nzWidth="150px">69码</th>
          <th nzAlign="center" nzWidth="140px">标准采购价(含税)</th>
          <th nzAlign="center" nzWidth="100px">进货周期</th>
          <th nzAlign="center" nzWidth="100px">预警值</th>
          <th nzAlign="center" nzWidth="100px">良品库存</th>
          <th nzAlign="center" nzWidth="100px">不良品库存</th>
          <th nzAlign="center" nzWidth="100px">BOM</th>
          <th nzAlign="center">操作</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let data of modelTable.data">
          <td
            [nzChecked]="setOfCheckedId.has(data.id)"
            (nzCheckedChange)="onItemChecked(data.id, $event, data)">
          </td>
          <!-- 商品编号 -->
          <td nzAlign="center">{{ data.id }}</td>
          <!-- 商品名称 -->
          <td nzAlign="center" nzBreakWord>{{ data.name }}</td>
          <!-- 商品规格 -->
          <td nzAlign="center">{{ data.attr }}</td>
          <!-- 69码 -->
          <td nzAlign="center">{{ data.code }}</td>
          <!-- 标准采购价(含税) -->
          <td nzAlign="center">
            {{ data.standardCostPrice ? '￥' + (data.standardCostPrice | number : '0.4-4' ): '-'}}
          </td>
          <!-- 进货周期 -->
          <td nzAlign="center">{{ (data.purchaseDuration || data.purchaseDuration == 0) || '---' }} 天</td>
          <!-- 预警值 -->
          <td nzAlign="center">{{ (data.earlyWarning || data.earlyWarning == 0) || '-' }}</td>
          <!-- 良品库存 -->
          <td nzAlign="center">{{ data.stock }}</td>
          <!-- 不良品库存 -->
          <td nzAlign="center">{{ data.badStock }}</td>
          <!-- BOM -->
          <td nzAlign="center">{{ (data.bomSize || data.bomSize == '0') ? data.bomSize : '0' }}</td>
          <!-- 操作 -->
          <td nzAlign="center">
            <button
              nz-button
              nzType="link"
              (click)="selectBom(data.id)"
              [disabled]="!data.bomSize">
              选择BOM
            </button>
          </td>
        </tr>
      </tbody>
    </nz-table>

    <!-- 分页template -->
    <ng-template #modelTotalTemplate let-total>共有 {{ modelTableForms.total }} 条</ng-template>
  </ng-container>
</nz-modal>
<!-- model END -->

<!-- BOM******model START -->
<nz-modal
    nzClassName="custom-model-wrap"
    [nzFooter]="null"
    [nzWidth]="300"
    [(nzVisible)]="isBomVisible"
    nzTitle="请输入倍数"
    (nzOnCancel)="bomhandleCancel()"
    (nzAfterClose)="boomNumber = '1'">

    <div *nzModalContent>
      <div class="form-wrap custom-model-body">
        <nz-input-number
            class="form-ipt"
            [nzMin]="1"
            [nzMax]="99999"
            [nzStep]="1"
            [nzPrecision]="0"
            [(ngModel)]="boomNumber">
        </nz-input-number>
      </div>

      <div class="custom-model-foot">
        <div class="custom-foot-cont">
          <button nz-button nzType="default" (click)="bomhandleCancel()">取消</button>
          <button nz-button nzType="primary" (click)="bomhandleOk()">确认</button>
        </div>
      </div>
    </div>
</nz-modal>
<!-- BOM******model END -->